<template>
	<!-- 左右收缩组件 -->
	<div class="LeftRightContraction">
		<div class="left" :style="{width:copyLeftWidth+'px',background:backgroundColor,opacity:opacity}">
			<view style="height: 100%;overflow-x: hidden;overflow-y: auto;" >
				<slot name="left"></slot>
			</view>
		    
		</div>
		
		<div class="right" :style="{background:backgroundColor}">
			<view style="height: 100%;overflow-x: hidden;width: 100%;overflow-y: auto;">
				<slot name="right"></slot>
			</view>
			<el-tag  effect="dark" :size="size" class="lz-el-tag" @click="clickElTag"><i :class="show ? 'el-icon-d-arrow-left':'el-icon-d-arrow-right'" ></i></el-tag>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		computed:{
			...mapState('ui', ['size']),
		},
		name: 'LeftRightContraction',
		props: {
			leftWidth: {
				type: Number,
				default: 200
			},
			backgroundColor:{
				type: String,
				default: "#fff"
			}
		},
		data() {
			return {
				show:true,
				copyLeftWidth:'',
				opacity:1
			}
		},
		mounted() {
			this.copyLeftWidth=this.leftWidth
		},
		methods: {
			clickElTag(){
				if(this.show){
					this.copyLeftWidth=0
					this.opacity=0
				}else{
					this.copyLeftWidth=this.leftWidth
					this.opacity=1
				}
				this.show=!this.show
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.LeftRightContraction{
		display: flex;height: 100%;width: 100%;
		.left{
			transition: width 0.5s,opacity 0.5s;
			margin-right: 10px;
			border-radius: 4px;
			height: 100%;
			overflow: hidden;
		}
		
		.lz-el-tag{
			position: absolute;bottom: 20%;left: -4px;
		}
		.right{
			position: relative;
			flex: 1;
			border-radius: 4px;
			width: calc(100% - 1000px);
		}
		.right::before{
			content: "";
			height: 100%;width: 1px;border: 1px solid #e5e5e5;
			position: absolute;top: 0;left:-6px;
		}
		.el-scrollbar__wrap{
			overflow-y: scroll!important;
		}
	}
</style>
